<template>
	<view>
		<!-- jsapi参考链接 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 -->
		<view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;border-top: 2upx solid #dddddd;background-color: #fff;margin-top: 10upx;" @click="wx_h5_pay">
			<view style="width: 160upx;position: relative;">
				<image src="../../../static/login/wx_load.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
				<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
			</view>
			<view style="width: 500upx;margin-left: 30upx;margin-top: 10upx;">
				<view style="height: 70upx;font-size: 36upx;font-weight: 555;">微信h5(微信内jsAPI)支付</view>
				<view style="height: 70upx;color: #ccc;">微信安全支付</view>
			</view>
		</view>
		
		<view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;background-color: #fff;margin-top: 10upx;" @click="wx_h5_pay">
			<view style="width: 160upx;position: relative;">
				<image src="../../../static/login/wx_load.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
				<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
			</view>
			<view style="width: 500upx;margin-left: 30upx;margin-top: 10upx;">
				<view style="height: 70upx;font-size: 36upx;font-weight: 555;">微信APP支付</view>
				<view style="height: 70upx;color: #ccc;">微信安全支付</view>
			</view>
		</view>
		
		<!-- <view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;background-color: #fff;margin-top: 10upx;">
			<view style="width: 160upx;position: relative;">
				<image src="../../../static/login/wx_load.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
				<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
			</view>
			<view style="width: 500upx;margin-left: 30upx;margin-top: 10upx;">
				<view style="height: 70upx;font-size: 36upx;font-weight: 555;">微信h5(微信外)直接支付</view>
				<view style="height: 70upx;color: #ccc;">暂未开放</view>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '', // 账户识别唯一标志(通过这个区分所有账户信息)
				openid1:'', // openid为 用户授权可支付字段 第一次支付之后后台会保存字段,在用户 第二次进入这个页面时就可以直接授权支付
			};
		},
		methods:{
			wx_h5_pay: ()=> {
				if( this.openid1 == '' || this.openid1 == null) { //公众号内这一步授权是因为直接唤起支付跨域,后台获取不到openid
					let oppid = this.openid
					uni.showModal({
						title: '提示',
						content: '微信支付授权',
						success: function (res) {
							if (res.confirm) {
								window.location.href = 'http://taiyou.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.jspay.getOpenid&openid='+ oppid // 当前页面打开URL页面
								uni.showToast({
									title:'授权成功请支付',
									icon:'none'
								})
							} else {
								console.log('用户点击取消')
							}
						}
					});
				} else {
					uni.request({
						url: 'http://taiyou.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.jspay&app=1', // 正常支付流程
						method: 'GET',
						data: {
							'openid':this.openid1,
							'SetBody':this.title,
							'trade_no':this.ordersn,
							'Total_fee':this.price
						},
						header:{'Content-Type': 'application/x-www-form-urlencoded'},
						success: res => {
							this.obj = res.data
							this.jsApiCall()
						},
						fail: () => {},
						complete: () => {}
					})
				}
			},
			jsApiCall:()=> {
				let orderid = this.orderid
				WeixinJSBridge.invoke( // 调起微信支付
					'getBrandWCPayRequest',this.obj,function(res){
						// 根据状态改跳转状态
						if(res.err_msg == "get_brand_wcpay_request:ok" ){
						  uni.navigateTo({
						  	url: './success/success?id=' + orderid
						  });
						}
					}
				);
			}
		}
	}
</script>

<style>
</style>
